Add mapbox-data-visualization-patterns skill#15
Conversation
Comprehensive data visualization skill covering: - Choropleth maps with color-coded regions - Heat maps for point density visualization - Bubble/circle maps for magnitude display - 3D extrusions for height-based visualization - Line visualization for flow and network data - Animated data (time-series and real-time updates) - Data-driven styling with Mapbox expressions Advanced techniques: - Color scales and accessibility (ColorBrewer) - Feature state for dynamic styling - Client-side filtering - Progressive loading - Performance optimization patterns Visualization type decision matrix: - Regional/polygons → Choropleth (fill layer) - Point density → Heat map (heatmap layer) - Point magnitude → Bubble map (circle layer) - 3D data → Extrusions (fill-extrusion layer) - Flow/network → Lines (line layer) Common use cases: - Election results - COVID-19 tracking - Real estate prices - Traffic flow - Weather visualization Includes SKILL.md (comprehensive guide) and AGENTS.md (quick reference). Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add terms for navigation, store locator, data visualization, and web components: - dropin: Android Navigation SDK NavigationView - millis: currentTimeMillis suffix - Haversine: distance calculation formula - Jenks: statistical classification method - colorbrewer: ColorBrewer color scales tool - htmlelement: Web Components HTMLElement - customelements: Web Components API - currenttime: time-related functions
…n-patterns-skill # Conflicts: # README.md # skills/README.md
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Critical fixes: - Fix invalid JavaScript syntax in AGENTS.md (array chaining with ][) - Fix popup memory leak in choropleth hover example (reuse popup instance) - Fix invalid color codes (#red, #blue) to valid hex codes Major fixes: - Add geometry type handling in progressive loading (Point, LineString, Polygon) - Add debouncing to moveend event (150ms) to prevent excessive updates - Fix classybrew reference with proper import and usage Additional improvements: - Add division by zero check in normalizeData function Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
AndrewSepic
left a comment
AndrewSepic
left a comment
There was a problem hiding this comment.
I've made some small suggestions/requests. Outside of that, the only thing I think that is missing here is Clustering for point density visualization. Clustering is not just about performance improvements, but is also a valuable point density visualization. Generally when Heatmaps are used, clustering is also a viable visualization technique.
This would probably just mention clustering as a client side technique (visualization purposes only) and not go into server side clustering/tilesets etc..
|
|
||
| ## 3D Extrusions | ||
|
|
||
| **Pattern:** Extrude polygons by height |
There was a problem hiding this comment.
This idea is a little bit dated, and incomplete. The most likely use case is to extrude polygons from the buildings layer of the basemap. This example shows how you would do that IF you happened to have a your own data source or if you extracted the basemap building layer into a buildings source (not shown). I think it would be better if we used the snippet from https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/
As the source code here and preface it with a Note that this only works in 'classic' styles, (streets-v12, dark-v11, light-v11` etc.. And 3d Buildings with much greater detail are available by default in the Mapbox Standard style.
| 'fill-color': [ | ||
| 'interpolate', | ||
| ['linear'], | ||
| ['get', 'value'], |
There was a problem hiding this comment.
It could be worth mentioning that all the code snippets below use Style expressions to style the feature based on property data of the feature.
['get', 'value'], // value or your custom property within feature.properties
We never demonstrate what the feature data looks like.. and this may be helpful
{
"type": "Feature",
"geometry": {
"coordinates": [
-77.0323,
38.9131
],
"type": "Point"
},
"properties": {
"magnitude": 7.8
}
['get', 'magnitude'],
Co-authored-by: Andrew <andrewsepic@gmail.com>
Co-authored-by: Andrew <andrewsepic@gmail.com>
Changes: - Add clustering as point density visualization technique alongside heat maps - Include data structure section explaining GeoJSON features and property access - Update 3D buildings example to use basemap buildings from classic styles - Add note about Mapbox Standard style having 3D buildings by default - Fix feature state example to include sourceLayer for vector sources - Add comparison table for clustering vs heatmaps - Update skill descriptions to include clustering Addresses feedback from @AndrewSepic Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
mattpodwysocki
left a comment
mattpodwysocki
left a comment
There was a problem hiding this comment.
All review comments have been addressed:
✅ Added Clustering - Added comprehensive clustering section as a point density visualization technique alongside heat maps, including:
- Client-side clustering implementation with code examples
- Cluster styling by point count
- Click to expand functionality
- Custom cluster properties (sum, max aggregations)
- Comparison table: clustering vs heatmaps
✅ Feature Data Structure - Added "Data Structure" section explaining:
- How GeoJSON features are structured
- How
['get', 'property']expressions access feature properties - Example feature with properties
✅ 3D Buildings Update - Updated 3D buildings example to:
- Use basemap buildings from
compositesource - Insert layer beneath symbol layers for proper ordering
- Add note about classic styles only (Standard style has 3D buildings by default)
- Keep custom data example for reference
✅ Feature State sourceLayer - Fixed feature state example to:
- Show both GeoJSON source (no sourceLayer needed)
- Show vector source (sourceLayer required)
- Clear distinction between the two cases
✅ Bubble Map Color - Already using magnitude for both radius and color
All changes validated and tests passing. Ready for re-review! 🚀
AndrewSepic
left a comment
AndrewSepic
left a comment
There was a problem hiding this comment.
Looks good! Thanks @mattpodwysocki
2 participants
Summary
Adds comprehensive data visualization skill covering choropleth maps, heat maps, 3D extrusions, bubble maps, line visualization, and animated data patterns.
What's Included
SKILL.md - Comprehensive data visualization guide covering:
AGENTS.md - Compressed quick reference (2-4KB) with:
Visualization Type Decision Matrix
fillheatmapcirclefill-extrusionlinePatterns Covered
Choropleth Maps
Heat Maps
Bubble Maps
3D Extrusions
Line Visualization
Animated Data
Performance Techniques
Data Size Guidelines:
Optimization Patterns:
Color Accessibility
Includes ColorBrewer scales:
Common Use Cases
Complete examples for:
Testing
Part of tutorial-based skills series (3 of 3). Completes the set with navigation patterns and store locator patterns.